Life Journey of a Perpetual Traveler: From Broken English to Consultant Career in Canada

Introduction

The life of an international student is one of constant adaptation and growth. My journey, marked by a never-ending search for a place to call home, began when I arrived in Vancouver for my studies. With broken English and a heart full of dreams, I embarked on a path filled with challenges, resilience, and ultimately, triumph. This is the story of how I navigated through the uncertainties of a foreign land, thrived in the face of a global pandemic, and found success in the consulting world, only to face a new challenge that would test my resolve once again.

• The Struggles: Finding My Footing
• Embracing the Unknown: Let's go to "Sephora"!
• The Turning Point: Embracing Growth
• New Search Component
  • Algolia
  • Kbar
• Styling and Layout Updates
  • Theming
  • New Layouts
• Migration Recommendations
• Conclusion
• Support
• Licence

The Struggles: Finding My Footing

The initial months were the toughest. Every lecture felt like a test of endurance as I struggled to keep up with the pace of academic life. Making friends was equally challenging; language barriers turned casual interactions into daunting tasks. There were nights filled with self-doubt and homesickness, where the thought of giving up seemed all too appealing. However, I found solace in small victories: a professor's encouraging words, a newfound friend, and the gradual improvement in my English skills.

Embracing the Unknown: Let's go to "Sephora"!

It was my first semester in Vancouver, and I was finally starting to make friends. One sunny afternoon, a group of us decided to meet at a local café. We shared stories and laughs, and I felt a sense of belonging. When Emma mentioned needing new makeup, I eagerly suggested, "Why don't we all go to Sophia?" There was a brief silence, followed by a burst of laughter. My face turned crimson as I realized I had mispronounced "Sephora." The laughter was lighthearted, but I felt awkward.

Seeing my discomfort, Emma smiled warmly and said, "It's Sephora, but don't worry! It's an easy mistake to make." Liam added, "I used to call it Sophia too when I first moved here. You're definitely not alone!" Their reassurance eased my embarrassment, and I laughed along with them. As we headed to Sephora, I felt grateful for their support and realized that these moments of misunderstanding and laughter were helping me grow and adapt, building friendships that made Vancouver feel a little more like home.

The Turning Point: Embracing Growth

As time passed, I began to find my footing. I immersed myself in my studies, driven by a desire to excel. Financial modeling, market analysis, and strategic investment planning became my areas of focus. With each passing day, my confidence grew, and Vancouver started to feel less like a foreign city and more like home. I participated in campus activities, sought out mentors, and built a network of supportive friends and colleagues.

New Search Component

What's a blog in 2023 without a command palette search bar?

One of the most highly requested features have been added 🎉! The search component supports 2 search providers - Algolia and Kbar local search.

Algolia

Algolia Docsearch is popular free service used across many documentation websites. It automatically scrapes the website that has is submitted for indexing and makes the search result available via a beautiful dialog modal. The pliny component is greatly inspired by the Docusaurus implementation and comes with a stylesheet that is compatible with the Tailwind CSS theme.

Kbar

Kbar is a fast, portable, and extensible cmd+k interface. The pliny implementation uses kbar to create a local search dialog box. The component loads a JSON file, default search.json, that was created in the contentlayer build process. Try pressing ⌘-k or ctrl-k to see the search bar in action!

Styling and Layout Updates

Theming

tailwind.config.js has been updated to use tailwind typography defaults where possible and to use the built-in support for dark mode via the prose-invert class. This replaces the previous prose-dark class and configuration.

The primary theme color is updated from teal to pink and the primary gray theme from neutral to gray.

Inter is now replaced with Space Grotesk as the default font.

New Layouts

Layout components available in the layouts directory, provide a simple way to customize the look and feel of the blog.¹

The downside of building a popular template is that you start seeing multiple similar sites everywhere 😆. While users are encouraged to customized the layouts to their liking, having more layout options that are easily switchable promotes diversity and perhaps can be a good starting point for further customizations.

In v2, I added a new post layout - PostBanner. It features a large banner image and a centered content container. Check out "Pictures of Canada" blog post which has been updated to use the new layout.

The default blog listing layout has also been updated to include a side bar with blog tags. The search bar in the previous layout has been replace with the new command palette search. To switch back to the old layout, simply change the pages that use the ListLayoutWithTags component back to the original ListLayout.

Migration Recommendations

Due to the large changes in directory structure, setup and tooling, I recommend starting from a fresh template and copying existing content, followed by incrementally migrating changes over to the new template.

Styling changes should be relatively minor and can be copied over from the old tailwind.config.js to the new one. If copying over, you might need to add back the prose-dark class to components that opt into tailwind typography styling. Do modify the font import in the root layout component to use the desired font of choice.

Changes to the MDX processing pipeline and schema can be easily ported to the new Contentlayer setup. If there are changes to the frontmatter fields, you can modify the document type in contentlayer.config.ts to include the new fields. Custom plugins can be added to the remarkPlugins and rehypePlugins properties in the makeSource export of contentlayer.config.ts.

Markdown layouts are no longer sourced automatically from the layouts directory. Instead, they have to be specified in the layouts object defined in blog/[...slug]/page.tsx.²

To port over larger components or pages, I recommend first specificing it as a client component by using the "use client" directive. Once it renders correctly, you can split the interactive components (parts that rely on use hooks) as a client component and keep the remaining code as a server component. Consult the comprehensive Next.js migration guide for more details.

Conclusion

I hope you enjoy the new features and improvements in V2. If you have any feedback or suggestions, feel free to open an issue or reach out to me on Twitter.

Support

Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or be a project sponsor.

Licence

MIT © Timothy Lin